<h1>Angular Router</h1>
<nav>
  <!-- 前四行是无名路由，因此点击后会在下面第一个outlet进行切换
       而下面一个链接指明了要去哪个有名路由
       为什么要指明？
       不指明编译器怎么知道在哪个地方切换
      -->
  <a routerLink="/crisis-center"  ariaCurrentWhenActive="page" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/superheroes"  ariaCurrentWhenActive="page" routerLinkActive="active">Heroes</a>
  <a [routerLink]="[ '/admin']" ariaCurrentWhenActive="page" routerLinkActive="active">Admin</a>
  <a routerLink="/login" routerLinkActive="active" ariaCurrentWhenActive="page">Login</a>
  <a [routerLink]="[ { outlets: { popup: ['compose']}} ]" routerLinkActive="active">Contact</a>
</nav>
<div [@routeAnimation]="getAnimationData()">
  <router-outlet></router-outlet>
</div>

<router-outlet name="popup"></router-outlet>

